Ext.namespace("MyApp.views.list_rows").list_rows_table = new function() {
  var pageId = 'MyApp.views.list_rows.list_rows_table';
  
  var store;
  
  function addInstance() {
    if(MyApp.views.viewport.getComponent(pageId) == null) {
      MyApp.views.viewport.add(getInstance());
    }
  };
  
  function prepareOptions(options, defaultOptions) {
    options = options?options:new Object();
    Ext.applyIf(options, defaultOptions);
    
    return options;
  }
  
  function display(options) {
    var defaultOptions = null;
    
    options = prepareOptions(options, defaultOptions);
    
    addInstance();
        
    store.load();
    
    MyApp.views.viewport.setActiveItem(pageId, options.animation);
  }
  this.display = display;
  
  function getInstance() {
    var toolbar = new Ext.Toolbar({
      dock : 'top',
      title: 'List rows',
      items: [
        {
          text: 'Log out',
          listeners: {
            tap: function() {
              MyApp.in_page.logout.logout();
            }
          }
        },
        {xtype: 'spacer'},
        {
          iconMask: true,
          iconCls: 'add'
        }
      ]
    });
    
    Ext.Ajax.defaultHeaders = {
      'Accept': 'application/json'
    };
    
    Ext.regModel('MyApp.views.list_rows.list_rows_table.Row', {
      fields: [
         {name: 'id', type: 'int'},
         {name: 'stringAttribute'}
      ]
    });
    
    store = new Ext.data.Store({
      model: 'MyApp.views.list_rows.list_rows_table.Row',
      
      proxy: {
        type: 'ajax',
        url : restPath + '/list-rows/list-rows-table-data',
        reader: {
          type: 'json',
          root: 'data',
          idProperty: 'id'
        },
        listeners: {
          exception: MyApp.common.handleStoreLoadException
        }
      }
    });
    
    var grid = new Ext.List({
      store: store,

      onItemDisclosure: function(record, btn, index) {
        grid.getSelectionModel().select(index);
        new Ext.ActionSheet({
          items: [{
            text: 'Edit',
            iconMask: true,
            iconCls: 'compose',
            handler : Ext.emptyFn
          },
          {
            text : 'Delete',
            ui: 'decline',
            iconMask: true,
            iconCls: 'delete',
            handler : function(button) {
              button.ownerCt.hide();
              MyApp.in_page.delete_row.deleteRow(record.data.id, function() {
                store.load();
              });
            }
          },
          {
            text : 'Cancel',
            iconMask: true,
            iconCls: 'reply',
            handler : function(button){
              grid.getSelectionModel().deselect(index);
              button.ownerCt.hide();
            }
          }]
        }).show();
      },
      
      itemTpl: '<span style="color: gray; font-size: 0.5em">{id}</span> {stringAttribute}',
      
      listeners: {
        itemtap: function(dataview, index, item, e) {
          if (e.getTarget('.x-list-item-body') ) { // workaround to prevent disclosure from triggering itemtap
            MyApp.views.view_row.view_row.display({ id: dataview.store.getAt(index).data.id });
          }
        },
        itemswipe:  function(itemtap) {
          Ext.Msg.alert('itemSwipe', 'id: ' + dataview.store.getAt(index).data.id, Ext.emptyFn);
        }
      } 
    });
    
    return new Ext.Panel({
      id: pageId,
      layout: 'fit',
    
      dockedItems: [toolbar],
      items: [grid]
    });
  };
}();